<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        /* .wrapper {
            /* background-color: red; 
        } */

        .wrapper .menu {
            /* width: 100%; */
            height: 30px;
            margin: 0 auto;
            background-color: rgb(51, 51, 51);
        }

        .wrapper .men {
            width: 80%;
            margin: 0 auto;
            color: white;
            line-height: 30px;
        }

        .wrapper .section {
            width: 80%;
            margin: 0 auto;
            position: relative;
        }

        .wrapper .section .content {
            height: 500px;
            margin: 20px auto;
            color: white;
            text-align: center;
            line-height: 500px;
        }
        .wrapper .section .floor{
            /* display: none; */
            cursor: pointer;
            position: fixed;
            right: 0px;
            top: 30%;
        }

        .wrapper .section .floor ul{
            list-style: none;
            /* position: absolute; */
           
        }
        .wrapper .section .floor ul li{
            width: 50px;
            height: 50px;
            background-color:rgb(154,124,255);
            color: white;
            text-align: center;
            line-height: 50px;
            margin-top: 10px;
        }
        .wrapper .section .floor ul .active{
            background-color: red
        }
        .wrapper .last {
            /* width: 100%; */
            height: 70px;
            margin: 0 auto;
            background-color: rgb(244,244,244);
        }

        .wrapper .las {
            width: 80%;
            margin: 0 auto;

            line-height: 70px;
        }
    </style>

    <script src="../js/jquery.js"></script>
    <script>
        $(function(){
            // 遍历填充盒子颜色
            var arr=["orange","pink","skyblue","green","purple","red"];
            $(".wrapper .section .content").each(function(index,item){
                $(this).css("backgroundColor",arr[index])
            })


            var heightarr=[0,530,860,1090,1520,1850,]
            // 移动到特定位置出现楼层出现
            var heightV=500;
            $(window).scroll(function(){
                // console.log( $(window).scrollTop());
                if($(window).scrollTop() >= heightV ){
                    $(".floor").stop().fadeIn();
                }else{
                    $(".floor").stop().fadeOut();
                }
                $.each(heightarr,function(index,item){
                    if($(window).scrollTop() >=item){
                        console.log(index);
                        $(".floor ul li").eq(index).addClass("active").siblings("li").removeClass("active")
                    }
                })
            })

            // 点击切换楼层点击高亮
            $(".floor ul ").on("click","li",function(){
              var index = $(this).index() ;
              $("html").animate({
                  "scrollTop": (index*heightV)+30
              })
              $(this).addClass("active").siblings("li").removeClass("active")
            });

        
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <div class="menu">
            <div class="men">
                <span>这是导航栏</span>
            </div>
        </div>

        <div class="section">
            <div class="content">这是1楼</div>
            <div class="content">这是2楼</div>
            <div class="content">这是3楼</div>
            <div class="content">这是4楼</div>
            <div class="content">这是5楼</div>
            <div class="content">这是6楼</div>
            <div class="floor">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>
        </div>
        <div class="last">
             <div class="las">
            <span>这是底部</span>
        </div>
        </div>
       
    </div>
</body>

</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        .wrapper .content{
            width: 350px;
            margin-left: 40px;
        }
        .wrapper .content ul li{
            /* width: 600px; */
            list-style: none;
            border-bottom: 1px dashed black;
            display: none;

        }
        .wrapper .content ul li a{
            float: right;
        }
        
    </style>
    <script src="../js/jquery.js"></script>
    <script>
        $(function(){
            // 添加事件
            $(".wrapper").on("click",".section button",function(){
                var value =$("textarea").val();
                // var index=$(this).index();
                // console.log(index);
                if(value.length == 0){
                    return;
                }

                $(".wrapper .content ul").append("<li>"+value+"<a href='#''>删除</a></li>")
                $(".wrapper .content ul li").slideDown()

                $("textarea").val("")
            })
            // 删除事件
            $(".wrapper .content ul").on("click","li a",function(){
                var index=$(this).index()
                // console.log(index);
                $(".wrapper .content ul li").eq(index).slideUp(function(){
                    $(this).remove()
                });
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="section">
            <span>微博发布</span>
            <textarea cols="40" rows="10"></textarea>
            <button>发布</button>
        </div>
        <div class="content">
            <ul>
                <li>13232 <a href="#">删除</a></li>
                <li>13232 <a href="#">删除</a></li>
            </ul>
        </div>

    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function () {
            // console.log( $(".wrapper select option").eq().text() );

            //全部移动到右侧
            $("button").eq(0).click(function () {
                // var text =$("option").eq(index).text()
                //    console.log( $(".leftBox>option"));
                $(".leftBox>option").remove().appendTo(".rightBox").prop("selected", false)
            })
            // 全部移动到左侧
            $("button").eq(1).click(function () {
                $(".rightBox>option").remove().appendTo(".leftBox").prop("selected", false)
            })
            // 单个移动右侧
            $("button").eq(2).click(function () {
                console.log($(":selected"));
                $(":selected").remove().appendTo(".rightBox").prop("selected", false)
            })
            // 单个移动到左侧
            $("button").eq(3).click(function () {
                console.log($(":selected"));
                $(":selected").remove().appendTo(".leftBox").prop("selected", false)
            })
        })
    </script>
</head>

<body>
    <div class="wrapper">

        <select class="leftBox" multiple style="height:300px; width: 100px; background-color:pink;" size="4">
            <option value="1">11</option>
            <option value="1">22</option>
            <option value="1">33</option>
            <option value="1">44</option>
            <option value="1">55</option>
        </select>

        <button> ＞＞＞ </button>
        <button> ＜＜＜ </button>
        <button> ＞ </button>
        <button> ＜ </button>

        <select multiple class="rightBox" style="height:300px; width: 100px;  background-color:pink;" size="4">
        </select>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
        p{
            width: 150px;
            height: 120px;
            background: orange;
        }
        h1{
            width: 200px;
            height: 230px;
            background: pink;
        }
    </style>
</head>
<body>
    <div></div>

    <input type="text"/>

    <p></p>

    <h1>标题标签</h1>

    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>李狗蛋</li>
        <li>李二狗</li>
    </ul>
    <button>添加li元素</button>

    <script src="js/jquery.min.js"></script>
    <script>
        // var input = document.querySelector("input");
        /* input.onkeyup = function(){
            console.log( this.value );
        } */

        // oninput 事件在用户输入时触发
        /* input.oninput = function(){
            console.log( this.value );
        } */

        /* $("input").keyup( function(){
            console.log( $(this).val() );
        }) */

        /* $("input").input( function(){
            console.log( $(this).val() );
        }) */

        // oninput是html5新增的事件,jQuery没有提供直接绑定的方法,所以不能使用input()方法绑定
        // 语法
        // jQuery对象.on("不带on的事件类型",匿名函数)

        // jQuery对象.on(events,[selector],fn)
        // 1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
        // 2. selector: 元素的子元素选择器 。
        // 3. fn:回调函数 即绑定在元素身上的侦听函数。

        $("input").on("input",function(){
            console.log( $(this).val() );
        })

        $("div").on("click",function(){
            $(this).css("backgroundColor","blue");
        })
        // 所以,on是另一个绑定事件方式,比传统方式更灵活

        /* $("p").mouseover(function(){
            console.log("我是ppppppp");
        })

        $("p").mouseout(function(){
            console.log("我是ppppppp");
        }) */

        /* $("p").on("mouseover",function(){
            console.log("我是ppppppp");
        })

        $("p").on("mouseout",function(){
            console.log("我是ppppppp");
        }) */

        // 如果多个事件执行的代码都是一样,那么可以写在一起,每个事件类型使用空格隔开
        $("p").on("mouseover mouseout click",function(){
            console.log("我是ppppppp");
        })

        // 如果多个事件执行的代码不同,也可以写在一起,需要给on传递一个对象,对象的属性名就是事件类型,属性值就是匿名函数
        // 目标,鼠标移上h1元素,显示skyblue天蓝色;  鼠标移走的时候,改回pink粉色; 鼠标点击的时候,显示purple紫色;  
        /* $("h1").on("mouseover",function(){
            $(this).css("backgroundColor","skyblue");
        })

        $("h1").on("mouseout",function(){
            $(this).css("backgroundColor","pink");
        })

        $("h1").on("click",function(){
            $(this).css("backgroundColor","purple");
        }) */

        $("h1").on({
            "mouseover":function(){
                $(this).css("backgroundColor","skyblue");
            },
            "mouseout":function(){
                $(this).css("backgroundColor","pink");
            },
            "click":function(){
                $(this).css("backgroundColor","purple");
            }
        })

        // on() 方法优势:可以事件委派操作 。
        // 事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

        // on() 方法优势: 动态创建的元素，click() 这样的事件注册是没有办法绑定事件， 
        // 但是on() 可以给动态生成的元素绑定事件  也就是on可以给未来动态创建的元素绑定事件

        $("button").click(function(){
            $("ul").append( ("<li>孙七</li>") );
        })

        /* $("ul li").on("click",function(){
            $(this).css("backgroundColor","lightgreen");
        }) */
        /* $("ul li").click(function(){
            $(this).css("backgroundColor","lightgreen");
        }) */

        // 使用事件委派绑定事件
        $("ul").on("click","li",function(){
            $(this).css("backgroundColor","lightgreen");
        })
    </script>
</body>
</html>